跳到主要内容

布局参数(Layout Parameters)

布局参数大致可以分为两类 — 影响父布局的参数和影响子布局的参数。

在 Rive 中,重要的是要记住布局参数通常只影响其他布局容器。这经常会导致为了达到预期效果而需要嵌套布局,但也为以创造性的方式与 Rive 的更自由形式的画布混合提供了机会。

绝对定位与相对定位(Absolute vs relative)

要控制行、列或网格中子布局的流动,需要子项是相对定位的,即没有启用其绝对定位选项。使用布局检查器右上角的图标在绝对和相对布局之间切换。

图片

  • 绝对定位(Absolute): 绝对定位布局在画板或父布局容器内定位自己。它可以将其 2 个或更多边缘固定到容器上。
  • 相对定位(Relative): 相对定位布局的位置由父画板或布局定义。更改父级上的弹性属性将决定子布局的行为。

缩放类型(Scale types)

布局的宽度和高度可以使用 3 种不同的缩放行为:

  • 固定(Fixed): 布局的固定宽度或高度。定义的值可以是点数或百分比值。使用字段内的单位切换在值类型之间切换。
  • 包裹(Hug): 布局的宽度和/或高度收缩以适应其子项。例如,您可能希望布局包裹文本对象,根据内部文本的长度调整大小。
  • 填充(Fill): 布局的宽度和/或高度扩展以填充父布局或画板内的可用空间。填充选项将宽度/高度字段切换为 fr(填充比例)单位,并显示基础大小字段。填充比例值使得可以控制具有填充缩放行为的多个子项之间的填充行为。例如,您可能希望子项平均填充可用空间,或者让一个子项的缩放比例大于其他子项。

在检查器中的宽度和高度字段下方可以找到设置缩放类型的选项。

图片

包裹和填充选项只会在适用时显示。例如,没有任何子项的布局不会显示包裹选项,而只有具有另一个布局作为父级的布局才能设置为填充。

尺寸约束(Size Constraints)

使用绝对定位切换旁边的图标来添加最小和/或最大宽度和高度值。与宽度和高度值本身一样,这些值可以定义为点数或百分比。

图片

裁剪(Clip)

裁剪切换可以隐藏布局中超出布局边界的任何子元素。

图片

位置(Position)

绝对定位布局提供了额外的选项来设置它们在画板或父布局中的位置。位置由至少 2 个固定边缘定义 — 一个水平和一个垂直,但也可以启用额外的边缘。

通过在检查器图形中选择标记或通过下方的字段来设置要固定的所需边缘。您可以在选择标记时按住 shift 来添加同一轴上的第二个边缘。从选定边缘的距离值可以通过在字段中选择所选单位类型来提供为点数或百分比。

图片

内边距和外边距(Padding and margin)

内边距只影响布局子项。例如,如果您想拥有一个带标签的按钮,文本应该包装在一个布局中,而该布局应该是应用内边距的另一个布局的子项。

外边距影响应用外边距的布局相对于其父布局的位置。

内边距和外边距可以沿轴对称应用,或应用于单个边缘。使用边缘切换来显示每个边缘的字段以及使用点数或百分比值的选项。

  • 内边距(Padding): 布局边界和任何相对布局子项之间的内部空间。
  • 外边距(Margin): 布局边界和相对父布局或画板之间的外部空间。

布局子项(Layout children)

布局的弹性参数只应用于其中包含的其他布局。为了生成可重排的内容行、列和网格,内容项本身必须包装在额外的布局容器中。

方向(Direction)

  • 行(Row): 沿水平轴布局子项。
  • 列(Column): 沿垂直轴布局子项。
  • 行反转(Row Reverse): 以相反的顺序沿水平轴布局子项。
  • 列反转(Column Reverse): 以相反的顺序沿垂直轴布局子项。

图片

换行(Wrap)

  • 不换行(No Wrap): 当内容达到布局边界时,继续延伸超出边界。
  • 换行(Wrap): 当内容达到布局边界时,将下一个项目放在当前行/列的下方或旁边。
  • 反向换行(Wrap Reverse): 与换行相同,但以相反的顺序显示内容。

图片

对齐(Alignment)

选择检查器小部件上的所需点来对齐布局容器中的内容。

图片

两端对齐(Justify)

点击当前对齐位置以展开内容以填充可用空间。再次选择活动图块将内容折叠回来。

图片

间距(Gap)

内容之间的间距(间隙)可以在水平和垂直方向上设置,并可以是点数或容器宽度/高度的百分比。

图片

从左到右 / 从右到左(Left-to-right/right-to-left)

决定此布局的水平方向,并会级联到其子布局(当子布局设置为继承时)。这将改变基于行的布局方向以及任何布局内的文本对齐方式。当需要支持从右到左的语言时,这很有用。

样式(Styles)

布局可以像 Rive 中的其他对象一样拥有填充、描边、羽化、混合模式和圆角。

样式可以在 背景(background) 中渲染,位于布局子项后面,或者在 前景(foreground) 中渲染,位于子项前面。例如,您可以将填充和羽化阴影放在子项后面,同时将描边放在前面渲染。

圆角适用于布局的样式及其裁剪边界。

看完还有疑问?进群交流下!
与众多 Rive 创作者、开发者一起交流探讨与答疑解惑。
加入交流群